<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :logoBarData="logoBarData" @handSearch="handleSearch"/>
        <category-bar :collapse="true" :linkDataList="categoryBarLinkDataList" />
      </div>
    </div>
    <div>
      <!-- 固定组件 -->
      <div class="container-width">
        <fixed-page pageType='1'></fixed-page>
      </div>
      <div v-loading="customLoading" element-loading-text="加载中" element-loading-background="#f5f5f5"
        class="custom-container">
        <template v-for="(item, index) in customDetailPageData" :key="index">
          <!-- 商品组件 -->
          <template v-if="item.componentType === 5">
            <custom-slider-first v-if="item.propMap.goodsStyle === '1'" :content="item" />
            <custom-slider-second v-if="item.propMap.goodsStyle === '2'" :content="item" />
            <custom-slider-third v-if="item.propMap.goodsStyle === '3'" :content="item" />
            <custom-slider-fourth v-if="item.propMap.goodsStyle === '4'" :content="item" />
          </template>
          <!-- 轮播组组件 -->
          <template v-if="item.componentType === 3">
            <custom-swiper-first v-if="item.propMap.swiperStyle === '1'" :content="item" />
            <custom-swiper-second v-if="item.propMap.swiperStyle === '2'" :content="item" />
            <custom-swiper-third v-if="item.propMap.swiperStyle === '3'" :content="item" />
          </template>
          <!-- 图片组组件 -->
          <template v-if="item.componentType === 4">
            <custom-picture-first v-if="item.propMap.pictureStyle === '1'" :content="item" />
            <custom-picture-second v-if="item.propMap.pictureStyle === '2'" :content="item" />
          </template>
        </template>
      </div>
      <!-- <div class="height-75" /> -->
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links :linksData="footerLinksDataList" />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <right-nav-sticky />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    provide,
    getCurrentInstance
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import categoryBar from '@/components/categoryBar/index.vue'
  import customSliderFirst from '@/components/custom/customSliderFirst/index.vue'
  import customSliderSecond from '@/components/custom/customSliderSecond/index.vue'
  import customSliderThird from '@/components/custom/customSliderThird/index.vue'
  import customSliderFourth from '@/components/custom/customSliderFourth/index.vue'
  import customSwiperFirst from '@/components/custom/customSwiperFirst/index.vue'
  import customSwiperSecond from '@/components/custom/customSwiperSecond/index.vue'
  import customSwiperThird from '@/components/custom/customSwiperThird/index.vue'
  import customPictureFirst from '@/components/custom/customPictureFirst/index.vue'
  import customPictureSecond from '@/components/custom/customPictureSecond/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import rightNavSticky from '@/components/rightNavSticky/index.vue'
  import fixedPage from './components/fixedPage/index.vue'

  import {
    useState
  } from '@/store/utils/useState'
  import {
    useActions
  } from '@/store/utils/useActions'

  import {
    getCustomPageList
  } from '@/api/customPage/customPage'

  export default defineComponent({
    name: 'Index',
    components: {
      headerLogin,
      logoBar,
      categoryBar,
      customSliderFirst,
      customSliderSecond,
      customSliderThird,
      customSliderFourth,
      customSwiperFirst,
      customSwiperSecond,
      customSwiperThird,
      customPictureFirst,
      customPictureSecond,
      footerLinks,
      footerInfos,
      rightNavSticky,
      fixedPage
    },
    setup() {
      const router = useRouter()
      const customDetailPageData = ref({})
      const fixedComponentsDataInfo = ref({})
      const storeState = useState('user', ['loginUserObj'])
      // logobar数据对象
      const logoBarData = ref({
        // 搜索栏tab开关；1.全部,2商品,3档口
        searchTabSwitch: '0',
        // logo组件数据
        logoComponentsData: {},
        // 服务组件数据
        serviceComponentsData: {}
      })
      const customLoading = ref(true)

      // const storeActions:any = useActions('user', ['setUserToken', 'setUserName', 'setCookieUserToken'])
      provide('fixedComponentsData', fixedComponentsDataInfo)
      // 固定组件里的轮播图
      const fixedComponentsBannerDataList = ref([])
      provide('fixedComponentsBannerDataList', fixedComponentsBannerDataList)
      // 固定组件里的热图
      const fixedComponentsHotDataList = ref([])
      provide('fixedComponentsHotDataList', fixedComponentsHotDataList)
      // 固定组件里的平台公告
      const fixedComponentsContentInfoPlatNoticeList = ref([])
      provide('fixedComponentsContentInfoPlatNoticeList', fixedComponentsContentInfoPlatNoticeList)
      // 固定组件里的平台规则
      const fixedComponentsContentInfoPlatRuleList = ref([])
      provide('fixedComponentsContentInfoPlatRuleList', fixedComponentsContentInfoPlatRuleList)
      // 尾部链接
      const footerLinksDataList = ref([])
      // provide('footerLinksDataList', footerLinksDataList)
      // 分类模块的链接
      const categoryBarLinkDataList = ref([])
      onMounted(() => {
        initCustomPage(getCurrentInstance())
      })
      const goNext = () => {
        router.push('/category-list')
      }
      const test = () => {
        //   storeActions.setUserToken('1145970028973297666')
        //   storeActions.setUserName('测试')
        //   storeActions.setCookieUserToken('13213254654')
      }

      const initCustomPage = (currentData: any) => {
        getCustomPageList(null, 1).then(response => {
          customLoading.value = false
          if (response.isError) return
          let resData = response.data
          const initCustomPageData = ref([])
          const footerLinkData = ref({})
          if (resData && resData.detailsList && resData.detailsList.length > 0) {
            for (let c = 0; c < resData.detailsList.length; c++) {
              let data = resData.detailsList[c]
              // 类型 1:首页固定组件 2友情链接 3:轮播组 4.图片组件 5:商品组件
              if (data.componentType === 1) {
                fixedComponentsDataInfo.value = data
              } else if (data.componentType === 2) {
                footerLinkData.value = data
              } else {
                initCustomPageData.value.push(data)
              }
            }
          }
          customDetailPageData.value = initCustomPageData.value
          // 处理固定组件数据
          if (fixedComponentsDataInfo && fixedComponentsDataInfo.value) {
            handleInitFixedComponentsDataInfo()
          }
          // 处理尾部数据
          handleInitFooterLinksComponentsDataInfo(footerLinkData)
          currentData.data.dataSetting.title = '首页'
          currentData.data.dataSetting.keywords = '首页-关键词'
          currentData.data.dataSetting.description = '首页-描述'
        })
      }
      // 处理固定组件数据
      const handleInitFixedComponentsDataInfo = () => {
        if (fixedComponentsDataInfo.value) {
          const logoComponentsData = ref({})
          const serviceComponentsData = ref({})
          // 固定数据
          if (fixedComponentsDataInfo.value.guideList && fixedComponentsDataInfo.value.guideList.length > 0) {
            const bannerPictureDataList = ref([])
            const hotPictureDataList = ref([])
            const initCategoryBarLinkDataList = ref([])
            for (var i = 0; i < fixedComponentsDataInfo.value.guideList.length; i++) {
              let data = fixedComponentsDataInfo.value.guideList[i]
              // guideList 1首页栏目 2首页轮播图 3首页图片组 5首页网站logo 6首页平台服务
              if (data.styleType === 2) {
                bannerPictureDataList.value.push(data)
              } else if (data.styleType === 3) {
                hotPictureDataList.value.push(data)
              } else if (data.styleType === 1) {
                initCategoryBarLinkDataList.value.push(data)
              } else if (data.styleType === 5) {
                logoComponentsData.value = data
              } else if (data.styleType === 6) {
                serviceComponentsData.value = data
              }
              fixedComponentsBannerDataList.value = bannerPictureDataList.value
              fixedComponentsHotDataList.value = hotPictureDataList.value
              categoryBarLinkDataList.value = initCategoryBarLinkDataList.value
            }
            // 处理资讯
            if (fixedComponentsDataInfo.value.contentInfoList && fixedComponentsDataInfo.value.contentInfoList
              .length > 0) {
              const initFixedComponentsContentInfoPlatNoticeList = ref([])
              const initFixedComponentsContentInfoPlatRuleList = ref([])
              for (var i = 0; i < fixedComponentsDataInfo.value.contentInfoList.length; i++) {
                let item = fixedComponentsDataInfo.value.contentInfoList[i]
                //内容类型：1.图文 2.视频 3.平台公告 4.帮助文档
                if (item.contentType === 3) {
                  initFixedComponentsContentInfoPlatNoticeList.value.push(item)
                } else {
                  initFixedComponentsContentInfoPlatRuleList.value.push(item)
                }
              }
              fixedComponentsContentInfoPlatNoticeList.value = initFixedComponentsContentInfoPlatNoticeList
                .value
              fixedComponentsContentInfoPlatRuleList.value = initFixedComponentsContentInfoPlatRuleList
                .value
            }
          }
          // logoBar数据处理
          logoBarData.value.searchTabSwitch = fixedComponentsDataInfo.value.propMap.searchTabSwitch || '1'
          logoBarData.value.logoComponentsData = logoComponentsData.value
          logoBarData.value.serviceComponentsData = serviceComponentsData.value
        }
      }

      // 处理尾部数据
      const handleInitFooterLinksComponentsDataInfo = (footerLinkData) => {
        const initFooterLinksDataList = ref([])
        if (footerLinkData && footerLinkData.value) {
          initFooterLinksDataList.value = footerLinkData.value.guideList
        }
        footerLinksDataList.value = initFooterLinksDataList.value
      }

      const handleSearch = (title:string,tabsIndex:string) => {
        if (tabsIndex === '2') {
          router.push({
          path: '/category',
          query: {
            title: title.value
            }
          })
        }else if(tabsIndex === '3'){
          router.push({
          path: '/shop',
          query: {
            title: title.value
            }
          })
        }
      }

      return {
        goNext,
        test,
        ...storeState,
        initCustomPage,
        customDetailPageData,
        fixedComponentsDataInfo,
        footerLinksDataList,
        logoBarData,
        categoryBarLinkDataList,
        customLoading,
        handleSearch
      }
    },
    data() {
      return {
        metaSetting: {
          title: '',
          keywords: '',
          description: ''
        },
        dataSetting: {}
      }
    },
    metaInfo() {
      return {
        title: this.metaSetting.title,
        meta: [
          { name: 'keywords', content: this.metaSetting.keywords },
          { name: 'description', content: this.metaSetting.description }
        ]
      }
    },
    watch: {
      dataSetting: {
        handler(newValue) {
          this.metaSetting.title = newValue.title
          this.metaSetting.keywords = newValue.keywords
          this.metaSetting.description = newValue.description
        },
        deep: true
      }
    }
  })
</script>

<style lang="scss" scoped>
  .custom-container {
    min-height: 200px;
  }
</style>
